<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- {{}} 用于输出对象属性和函数返回值 -->
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>
</body>

<script>
    // 每个Vue应用都需要通过实例化Vue来实现
    var vm = new Vue({
        // 指定Vue操作DOM元素
        el: '#app',
        // 定义属性
        data: {
            site: '菜鸟教程',
            url: 'www.runoob.com',
            alexa: '10000'
        },
        // 定义函数
        methods: {
            details: function () {
                return this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })

    console.log(vm.data)  // undefined
    console.log(vm.site)  // 菜鸟教程
    console.log(vm.methods)  // undefined
    console.log(vm.details)  // f () {}
    console.log(vm.$el == document.getElementById('app'))  // true
    console.log(vm.$data)  // object
    console.log(vm.$methods) // undefined
</script>

</html>